<template>
  <section>
    <div class="mask"></div>
        <main>
            <div class="mod_radio_sidebar">
                <a href="#" class="radio_sidebar_item">心情</a>
                <a href="#" class="radio_sidebar_item">主题</a>
                <a href="#" class="radio_sidebar_item">场景</a>
                <a href="#" class="radio_sidebar_item">曲风</a>
                <a href="#" class="radio_sidebar_item">语言</a>
                <a href="#" class="radio_sidebar_item">人群</a>
                <a href="#" class="radio_sidebar_item">乐器</a>
                <a href="#" class="radio_sidebar_item">陪你听</a>
                <a href="#" class="radio_sidebar_item">厂牌</a>
        </div>
        <div class="mod_radio">
        <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true">
        <template v-slot:list_title_txt>
            猜你喜欢啊
        </template>
        </ItemCard>
        </div>
        </main>
 </section>
</template>
<script>
const PathFolder = require.context('@/assets/DianTaiPage', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
import axios from 'axios'
import ItemCard from '../ItemCard.vue';
    export default{
        data(){
            return{
                PathFolder,
                Shownums:100,
                DataSet:{},
            }
        },
        name:'DianTaiPage',
        components:{
            ItemCard
        },
        beforeMount(){
            this.FetchData();
        }
        ,
        methods:{
            FetchData(){
                axios.get('/data/Database.json')
                .then(
                    response=>{
                        this.DataSet = response.data
                    }
                )
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
            }
        }
    }
</script>
<style scoped>
    .mask{
        width: 100%;
        height: 300px;
        z-index: 99;
        position: relative;
        background-color: #f7f7f7;
    }
    section{
       
  
    }
    main{
        z-index: 999;
        margin: 0 auto;
        padding-top: 35px;
        max-width: 1200px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin-top: -300px;

    }
    .mod_radio{
        margin-left: 245px;
        margin-top: 20px;
    }
    .mod_radio_sidebar{
        position:fixed;
        top:195px;
        background: url('@/assets/DianTaiPage/radio_sidebar.png') 0 0 no-repeat;
    }
    .radio_sidebar_item{
        position:relative;
        display: block;
        padding-left: 63px;
        line-height: 59px;
        font-size: 15px;
        text-decoration: none;
        cursor: pointer;
        font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;
    }
</style>